<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad(() => {})

const isPlaning = ref(true)

const favoritesList = ref([
  { name: '新闻学', science: '文科', tag: '文学 新闻传播' },
  { name: '计算机科学与技术', science: '理科', tag: '工学 计算机类' },
  { name: '新闻学', science: '文科', tag: '文学 新闻传播' },
])
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">我的收藏</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
    </template>
    <template #gBody>
      <view class="wh100p flex-column gui-relative favorites" style="flex: 1">
        <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="background-color: #f7f7f7">
          <view class="gap4 flex-column">
            <view
              v-for="(item, index) of [...favoritesList, ...favoritesList, ...favoritesList, ...favoritesList]"
              :key="index"
              class="favoriteItem flex-between column-center"
            >
              <view class="flex-column h100p flex-between">
                <text class="title" style="">{{ item.name }}</text>
                <view class="flex" style="color: #537bb6; font-size: 26rpx">
                  <text class="subScience">{{ item.science }}</text>
                  <text class="tag">{{ item.tag }}</text>
                </view>
              </view>
              <view class="h100p flex-column" style="margin-right: 60rpx; margin-top: 30rpx">
                <text
                  class="gui-icons gui-block gui-text"
                  style="font-size: 42rpx"
                  :style="`color:${isPlaning ? 'red' : 'rgba(69, 90, 100, 0.6)'}`"
                >
                  &#xe605;
                </text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.favoriteItem {
  height: 160rpx;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
}

.favoriteItem .title {
  color: #537bb6;
  font-weight: 600;
}
</style>
